/**
 * Include this file _after_ the main backbone-forms file to override the default templates.
 * You only need to include templates you want to override.
 * 
 * Requirements when customising templates:
 * - Each template must have one 'parent' element tag.
 * - "data-type" attributes are required.
 * - The main placeholder tags such as the following are required: fieldsets, fields
 */
;(function() {
  var Form = Backbone.Form;

    
  //TWITTER BOOTSTRAP TEMPLATES
  //Requires Bootstrap 2.x
  Form.setTemplates({

    //HTML
    form: '\
        <div>{{fieldsets}}</div>\
    ',

    fieldset: '\
    	<h2><small>{{title}}</small></h2>\
		<form class="form-horizontal formtastic">\
    		{{fields}}\
    	</form>\
    ',

    field: '\
	    <div class="span5">\
	    	<div class="string control-group stringish field-{{key}}">\
	    		<label class="control-label" for="{{id}}">{{title}}</label>\
	    		<div class="controls">\
    				{{editor}}\
    				<div class="help-block" style="display:none;">{{help}}</div>\
    			</div>\
	    	</div>\
	    </div>\
    ',
    
    selectDropdown: '\
      <div>\
    	<div style="float: left;">\
			<input select2="true" style="display:none;width:{{width}}px;" id="{{elem}}"/>\
    		<input type="text" style="display:none;" id="{{elem}}_input" disabled="disabled"/>\
    	</div>\
    	<div class="btn-group" style="float: left; margin-left: 5px;display:none;">\
    		<button class="btn btn-info btn-first" type="button" init-value="B">B</button>\
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>\
			<ul class="dropdown-menu action-group" ref="{{elem}}">\
    			<li style="display:none;"><a class="group-a" href="javascript:void(0);">Business Update</a></li>\
    			<li style="display:none;"><a class="group-a" href="javascript:void(0);">Correct</a></li>\
    			<li style="display:none;"><a class="group-a" href="javascript:void(0);">Retire</a></li>\
    			<li style="display:none;"><a class="group-a" href\"javascript:void(0);">Purge</a></li>\
    		</ul>\
	    </div>\
        <div style="float: left; margin-left: 5px;display:none;">\
			<input id="{{elem}}_trueExchange" title="True Exchange" type="checkbox" disabled="disabled" style="width:20px;">\
    	</div>\
      </div>\
    ',
    
    selectPopup: '\
      <div>\
		<div id="{{elem}}_input" class="like-input normal-input">\
    		<span class=\"default-cont\">{{default_content}}</span>\
    		<i id="dictButton_{{elem}}" class="icon-th-list"></i>\
    	</div>\
    	<div id="{{elem}}_float" class="chzn-choices">\
    		<span class="custom-cont" id="{{elem}}"></span>\
    		<a id="{{elem}}_empty" class="search-choice-close" href="javascript:void(0);"></a>\
    	</div>\
    	<div class="btn-group" style="float: left; margin-left: 5px;display:none;">\
    		<button class="btn btn-info" type="button">B</button>\
			<button class="btn btn-info dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>\
			<ul class="dropdown-menu action-group" ref="{{elem}}">\
    			<li style="display:none;"><a href="javascript:void(0);">Business Update</a></li>\
    			<li style="display:none;"><a href="javascript:void(0);">Correct</a></li>\
    			<li style="display:none;"><a href="javascript:void(0);">Retire</a></li>\
    			<li style="display:none;"><a href\"javascript:void(0);">Purge</a></li>\
    		</ul>\
	    </div>\
        <div style="float: left; margin-left: 5px;display:none;">\
			<input id="{{elem}}_trueExchange" title="True Exchange" type="checkbox" disabled="disabled" style="width:20px;">\
    	</div>\
      </div>\
    ',
        
    nestedField: '\
      <div class="field-{{key}}">\
        <div title="{{title}}" class="input-xlarge">{{editor}}</div>\
        <div class="help-block">{{help}}</div>\
      </div>\
    ',

    list: '\
      <div class="bbf-list">\
        <ul class="unstyled clearfix">{{items}}</ul>\
        <button type="button" class="btn bbf-add" data-action="add">Add</div>\
      </div>\
    ',

    listItem: '\
      <li class="clearfix">\
        <div class="pull-left">{{editor}}</div>\
        <button type="button" class="btn bbf-del" data-action="remove">&times;</button>\
      </li>\
    ',

    date: '\
      <div class="bbf-date">\
        <select data-type="date" class="bbf-date">{{dates}}</select>\
        <select data-type="month" class="bbf-month">{{months}}</select>\
        <select data-type="year" class="bbf-year">{{years}}</select>\
      </div>\
    ',

    dateTime: '\
      <div class="bbf-datetime">\
        <p>{{date}}</p>\
        <p>\
          <select data-type="hour" style="width: 4em">{{hours}}</select>\
          :\
          <select data-type="min" style="width: 4em">{{mins}}</select>\
        </p>\
      </div>\
    ',

    'list.Modal': '\
      <div class="bbf-list-modal">\
        {{summary}}\
      </div>\
    '
    
  }, {
  
    //CLASSNAMES
    error: 'error' //Set on the field tag when validation fails
  });


})();
